<template>
	<view class="container">
		<view class="sort_list" :style="{height:height}">
			<view :class="sort_id==item.goods_sort_id?'current':'sort_name'"
			      v-for="(item,index) in goods_sort" :key="index" :id="item.goods_sort_id" v-on:click="sort_list">{{item.goods_sort_name}}</view>
			<view class="lh"></view>
		</view>
		<view class="goods_list" :style="{width:goods_w}">
			<view class="goods_unit" v-on:click="goods_detail" v-for="(item,index) in list" :key="index" :id="item.goods_id" v-if="list.length>0">
				<image class="goods_unit_pic" :style="{height:pic_h}" mode="aspectFill" :src="url+item.imgurl"></image>
				<view class="goods_name">{{item.goods_name.substr(0,7)}}</view>
				<!-- <view class="sub_goods_name">{{item.content}}…</view> -->
				<view class="goods_property">
					<view class="goods_price">￥{{item.price}}</view>
				</view>
				<view class="goods_property">
					<view class="old_price">￥{{item.original}}</view>
					<view class="goods_cash">销量：{{item.sum}}</view>
				</view>
<!--				<view class="goods_commsion" v-if="item.commission!=0">-->
<!--					<view class="commission_name">佣金</view>-->
<!--					<view class="commission_price">￥{{item.commission}}</view>-->
<!--				</view>-->
			</view>
			<view class="none" v-else>还没有商品</view>
			<view class="hlh"></view>
		</view>
	</view>
</template>
<style>
	.none{width:100%;height: 80upx;line-height: 80upx;text-align: center;color: #282828;font-size: 28upx;}
	.goods_list{width:70%;margin:10upx 0 0 29%;display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;}
	.goods_unit{width:48.5%;background: #FFFFFF;/* box-shadow: 0px 0px 6px #ccc; */margin-bottom:20upx;display: flex;border-radius: 10upx;overflow:hidden;
	            flex-direction: column;justify-content: space-between;align-items: flex-start;padding-bottom: 20upx;}
	.goods_unit_pic{width:100%;overflow:hidden;}
	.goods_name{width:96%;padding:0 2%;line-height: 40upx;font-size: 26upx;color: #717171;}
	.sub_goods_name{width:96%;padding:0 2%;line-height: 35upx;font-size: 24upx;color:#AAAAAA;}
	.goods_property{width:96%;padding:0 2%;display: flex;justify-content: space-between;align-items: center;height: 40upx;}
	.goods_price{font-size: 36upx;font-weight: bold;color: #f40601;}
	.goods_property image{width:50upx;height: 50upx;}
	.old_price,.goods_cash{font-size: 24upx;color: #AAAAAA;}
	.old_price{text-decoration: line-through;}
	.goods_property image{width:50upx;height: 50upx;}
	.goods_commsion{margin-left:2%;width:75%;display: flex;justify-content: space-between;align-items: center;height: 40upx;border-radius:10upx;overflow: hidden;}
	.commission_name{width:50%;line-height: 40upx;height:40upx;font-size:28upx;background:#ef3d19;color: #ffffff;text-align: center;}
	.commission_price{width:50%;line-height: 40upx;height:40upx;font-size:26upx;background:#ffece8;color: #ef3d19;text-align: center;}
	/******************/
	.sort_list{width:24%;margin:10upx 2%;position:fixed;top:0;left:0;overflow-y: auto;}
	.sort_name{font-size: 28upx;width: 100%;text-align: center;height: 100upx;line-height: 100upx;background: #ffffff;/* border-bottom: 1px solid #E1E1E1; */color: #999999;}
	.current{font-size: 28upx;width: 97%;text-align: center;margin:30upx 0;height: 40upx;line-height: 40upx;background: #F1F1F1;
	         color: #333333;border-left: 4px solid #3DE9C7;}
	.lh{width:100%;height: 300upx;}
	/******************/
	/**********************************************/
	page,.container{background: #F1F1F1;}
	.container{width:100%;display: flex;justify-content: space-between;align-items: flex-start;}
	.hlh{height: 100upx;width: 100%;}
	.foot{width:98%;padding:10upx 1%;background: #FFFFFF;height: 90upx;display: flex;
		  justify-content: space-between;align-items: center;position: fixed;bottom: 0;left:0;}
	.foot_unit{width:20%;display: flex;flex-direction: column;justify-content:space-between;
	           align-items: center;height: 80upx;}
	.foot_unit image{width:40upx;height: 40upx;}
	.add{width:80upx;display: flex;justify-content: center;align-items: center;height: 80upx;}
	.add image{width:80upx;height: 80upx;}
	.foot_unit_name{font-size: 24upx;color: #b5b5b5;}
	.foot_current{color: #3de9c7 !important;}
	/**********************************************/
</style>
<script>
	export default {
		data() {
			return {
				name:'',
				pic_h:'',
				height:'',
				goods_sort:[],
				result:[],
				sort_id:0,
				goods_w:'',
				list:[],
				url: getApp().globalData.url,
				static:getApp().globalData.static,
				tab_current:'sort'
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.goods_w = w*0.7+"px";
			this.banner_h = w*0.75+"px";
			this.height  = res.windowHeight+"px";
			this.pic_h = w*0.7*0.485+"px";

			// if(e.id!=undefined)
			// {
			// 	this.sort_id = parseInt(e.id);
			// }
			// this.initialize();
		},
		onShow(){

			// if(sort_id!="")
			// {
			// 	this.sort_id = sort_id;
			// 	console.log("onshow  show");

			// }
			this.initialize();
		},
		onReachBottom()
		{
			console.log("buttom");
			this.initialize();
		},
		methods: {
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				var sort_id   = uni.getStorageSync("sort_id");
				console.log(sort_id);
				if(sort_id!='')
				{
					this.sort_id = sort_id;
				}
				console.log(this.sort_id);
				if(that.result.length==0)
				{
					var start = 0;
				}
				else
				{
					for(var i=0;i<that.result.length;i++)
					{
						if(that.result[i].goods_sort_id==parseInt(that.sort_id))
						{
							var start = that.result[i].start;
						}
					}
				}
				//#ifdef MP-WEIXIN
				var type = "weixin";
				//#endif
				//#ifdef APP-PLUS
				var type = "app";
				//#endif
				//#ifdef H5
				var type = "app";
				//#endif
				uni.request({
					url: this.url+'/wechat_goods_sort_list',
					data: {member_id:member_id,type:type,id:this.sort_id,start:start},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						that.goods_sort = res.data.goods_sort;
						if(that.result.length==0)
						{
							that.list = [];
							for(var i=0;i<res.data.goods_sort.length;i++)
							{
								if(i==0 && that.sort_id==0)
								{
									that.sort_id = res.data.goods_sort[i].goods_sort_id;
								}
								var tmp = {};
								tmp.goods_sort_id = res.data.goods_sort[i].goods_sort_id;
								tmp.list = [];
								tmp.start = 0;
								that.result.push(tmp);
							}
						}
						if(res.data.status==1)
						{
							// console.log(that.result);
							// var tmp_id = that.list[0].goods_sort_id;
							for(var i=0;i<that.result.length;i++)
							{
								if(that.result[i].goods_sort_id==parseInt(that.sort_id))
								{
									that.result[i].start += 10;
									for(var j=0;j<res.data.result.length;j++)
									{
										that.result[i].list.push(res.data.result[j]);
										that.list.push(res.data.result[j]);
										// if(tmp_id==parseInt(that.sort_id))
										// {

										// }
									}
									// if(tmp_id != parseInt(that.sort_id))
									// {
									// 	that.list = that.result[i].list;
									// }
								}
							}
						}
						else
						{
							uni.showToast({
								title:"没有信息了",
								duration:1000
							})
						}
					}
				});
			},
			sort_list:function(e)
			{
				var sort_id = e.currentTarget.id;
				this.sort_id = parseInt(sort_id);
				uni.setStorageSync("sort_id",this.sort_id);
				this.list = [];
				var status = 0;
				for(var i=0;i<this.result.length;i++)
				{
					if(this.result[i].goods_sort_id==parseInt(this.sort_id))
					{
						if(this.result[i].list.length>0)
						{
							for(var j=0;j<this.result[i].list.length;j++)
							{
								this.list.push(this.result[i].list[j]);
							}
						}
						else
						{
							status =1;
						}
					}
				}
				if(status==1)
				{
					this.initialize();
				}
				// console.log(this.list.length);
			},
			goods_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"../mall/goods_detail?id="+id
				})
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
			},
			search:function()
			{
				if(this.name=="")
				{
					uni.showToast({
						title:"不能为空",
						duration:2000
					})
				}
				else
				{
					uni.navigateTo({
						url:"/pages/shop/sort_list?name="+this.name
					})
				}
			}
		}
	}
</script>


